<template>
  <div class="castContainer" v-cloak>
    <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
    <div class="castMain">
      <div class="castBanner">
        <img v-lazy="castBanner">
      </div>
      <div class="castInfo">
        <div class="castInfo_title" v-text="castInfo.title"></div>
        <div class="castInfo_name">
          <span><img :src="classRoom.userPhoto+'?imageView2/0/w/68/format/jpeg'"></span>
          <p class="font12" v-text="castInfo.name"></p>
        </div>
        <div class="castInfo_label font11 textCenter" v-text="castInfo.label"></div>
      </div>
      <!--详情-->
      <div class="castDetail font12">
        家庭是社会的细胞。社会离不开家庭。孩子的教育来自家庭，因此，家庭教育至关重要。家庭省人才是个人成长的园地。父母是孩子的第一任老师，父母可以教孩子第一句谎言，也可以教他做一个诚实的人，家庭是个人成长的园地。
      </div>
      <!--评论-分享-->
      <div class="commentShare">
        <span class="comment" @click="setComment()"><img src="../../../components/images/conment.png"></span>
        <span class="share" @click="share()"><img src="../../../components/images/share.png"></span>
        <p class="font11">举报</p>
      </div>
      <!--评论-->
      <commentList :text="'回复 '" :commentObj="classRoom" :type="'APP_CLASS_ESSENCE'" :index="0" :classId="classId"  v-if="classRoom" ref="commentMethod"></commentList>
      <div class="line"></div>
      <!--更多干货-->
      <moreLinkComponent></moreLinkComponent>
    </div>
  </div>
</template>
<script type="text/babel">
  import API from '../../../api/api.js'
  import {domain,imagedomain} from '../../../api/api.js'
  const api = new API();
  import commentList from '../../../components/commentList_header.vue'
  import moreLinkComponent from '../cast/more_link.vue'
  export default {
    data () {
      return {
        castBanner: '',
        castInfo: {
          title: '中美美院往事第一章',
          name: 'April',
          label: '育儿干货'
        },
        classRoom:'',
        imagedomain:imagedomain,
        role: this.$route.query.role?this.$route.query.role:'',
        classId: this.$route.query.classId?this.$route.query.classId:'',
        appId: this.$route.query.appId?this.$route.query.appId:this.$route.query.tid,
        shareUrl:'',
        shareInfo:''
      }
    },
    components: {
      commentList,
      moreLinkComponent
    },
    mounted () {
      this.$util.jsBridgeCallBack('jsLeftAction', this.closeWebView);
      this.$nextTick(function () {
        setTimeout(()=>{
          this.propsTitle();
        },300);
      });
    },
    methods:{
      closeWebView(){
        this.$util.JsBridge('closeWebView', {}, () => {
        })
      },
      propsTitle(){
        this.$util.JsBridge('propsTitle', {
          title: '大咖详情页',
        }, (res) => {
        })
      },
      share(){
        let param = {
          shareCode: 'APP_CLASS_ESSENCE ',
          classId: this.classId,
          tid:this.appId
        };
        api.getShareInfo(param).then(res => {
          let {code, rs} = res;
          if (code == 200) {
            this.shareInfo=rs;
          }else{
            this.$util.sendLog(1,'APP_CLASS_ESSENCE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂回顾',code:'APP_CLASS_ESSENCE',path: '/app/classroom/detail',api:'getShareInfo',success:false,data:res}));
          }
        }).then(()=>{
          this.$util.JsBridge('share', {
            imgUrl: this.imgList.length>0?this.imgList[0].type==1?this.imgList[0].imgUrl:this.imgList[0].imgUrl+'?vframe/jpeg/offset/1/w/80':'',
            title: this.shareInfo.title,
            content:this.shareInfo.content,
            type:-1,
            shareUrl:this.shareUrl+'&appId='+this.appId+'&role='+this.role,
            tid:this.appId
          }, (res) => {
          })
        }).catch(()=>{
          this.$util.sendLog(1,'APP_CLASS_ESSENCE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂回顾',code:'APP_CLASS_ESSENCE',path: '/app/classroom/detail',api:'getShareInfo',success:false,data:'网络异常'}));
        })
      },
      setComment(){
        this.$util.JsBridge('setComment', {
            limit: 500,
            placeHolder: '请输入500字以内评论'
          }, (result) => {
            let data = {};
            if (result.content === '') {
              this.$toast('评论内容不能为空')
            } else {
              data.type = result.type;
              if (data.type == 2) {
                data.time = result.time;
              }
              data.content = this.$util.utf16toEntities(result.content)
              const param = {
                classId: this.classId,
                type: data.type,
                appId: this.appId,
                content: data.content,
                appCode: 'APP_CLASS_ESSENCE'
              }
              if (result.type == 2) {
                param.time = result.time;
              }
              let response = api.setComment(param);
              response.then((res) => {
                let {code, rs} = res;
                if (code === 200) {
                  this.$refs.commentMethod.sonSetComment(rs);
                }else{
                  this.$util.sendLog(1,'APP_CLASS_ESSENCE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂回顾',code:'APP_CLASS_ESSENCE',path: '/app/classroom/detail',api:'setComment',success:false,data:res}));
                }
              }).catch(()=>{
                this.$util.sendLog(1,'APP_CLASS_ESSENCE',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'课堂回顾',code:'APP_CLASS_ESSENCE',path: '/app/classroom/detail',api:'setComment',success:false,data:'网络异常'}));
              })
            }
          }
        )
      },
    }
  }
</script>
<style scoped lang="scss">
  .castContainer{
    width: 100%;
    background:#0d0d0d;
    .castMain{
      width: 100%;
      position: relative;
      z-index: 10;
      .castBanner{
        background:#d8d8d8;
        width: 3.75rem;
        height: 2rem;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center center;
        }
      }
      .castInfo{
        width: 100%;
        height: 0.78rem;
        box-sizing: border-box;
        position: relative;
        .castInfo_title{
          font-size: 0.13rem;
          color:#fff;
          line-height: 0.13rem;
          padding: 0.18rem 0 0.12rem 0.18rem;
        }
        .castInfo_name{
          height: 0.25rem;
          padding-left: 0.18rem;
          span{
            background:#d8d8d8;
            width: 0.25rem;
            height: 0.24rem;
            border-radius:100%;
            overflow: hidden;
            float: left;
            margin-right: 0.07rem;
            img{
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center center;
            }
          }
          p{
            opacity:0.8;
            color:#fff;
            height: 0.25rem;
            line-height: 0.25rem;
          }
        }
        .castInfo_label{
          position: absolute;
          right: 0.12rem;
          bottom: 0.12rem;
          background: rgba(255,255,255,.1);
          border-radius: 0.06rem;
          width: 0.67rem;
          height: 0.22rem;
          line-height: 0.22rem;
        }
      }
      .castInfo:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #fff;
        opacity: 0.2;
      }
      .castDetail{
        box-sizing: border-box;
        width: 100%;
        padding: 0.17rem 0.12rem;
        line-height: 0.18rem;
        opacity:0.7;
        img{
          display: block;
          max-width: 100%;
        }
      }
      .commentShare{
        height: 0.3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        span{
          display: flex;
          float: left;
          width: 0.3rem;
          height: 0.3rem;
          border-radius:100%;
          background: rgba(255,255,255,0.1);
          margin: 0 0.3rem;
          justify-content: center;
          align-items: center;
          img{
            display: block;
            width: 0.15rem;
            height: 0.15rem;
          }
        }
        p{
          position: absolute;
          right: 0.12rem;
          bottom: 0;
          opacity:0.5;
          z-index: 20;
        }
      }
      .line{
        width: 100%;
        height: 0.12rem;
        background: rgba(0,0,0,0.5);
        margin-top: 0.2rem;
      }
    }
  }
</style>
